<template>
  <div style="margin: 4px">
    <el-row class="tjzt">
      <el-col :span="6">
        <div>
          <el-statistic
            :value="UP.TN"
            title="用户总数">
            <template slot="prefix">
              <i class="el-icon-s-custom" style="color: blue"></i>
            </template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-statistic
            :value="UP.R2"
            title="区域队长数">
            <template slot="prefix">
              <i class="el-icon-s-custom" style="color: blue"></i>
            </template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-statistic
            :value="UP.R3"
            title="队长数">
            <template slot="prefix">
              <i class="el-icon-s-custom" style="color: blue"></i>
            </template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :span="6">
        <div>
          <el-statistic
            :value="UP.R5"
            title="普通用户">
            <template slot="prefix">
              <i class="el-icon-s-custom" style="color: blue"></i>
            </template>
          </el-statistic>
        </div>
      </el-col>
    </el-row>
    <el-row class="tjzt">
      <el-col :span="4">
        <div>
          <el-statistic
            :value="UP.R6"
            title="集体用户数">
            <template slot="prefix">
              <i class="el-icon-s-custom" style="color: red"></i>
            </template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :span="4">
        <div>
          <el-statistic
            :value="UP.QC"
            title="总进件单数">
            <template slot="prefix">
              <i class="el-icon-tickets" style="color: red"></i>
            </template>
          </el-statistic>
        </div>
      </el-col>

      <el-col :span="4">
        <div>
          <el-statistic
            :value="UP.PC"
            title="总支付单数">
            <template slot="prefix">
              <i class="el-icon-shopping-cart-full" style="color: red"></i>
            </template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :span="4">
        <div>
          <el-statistic
            :precision="2"
            decimal-separator="."
            :value="UP.PT"
            title="总支付额">
            <template slot="prefix">
              <i class="el-icon-money" style="color: red"></i>
            </template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :span="4">
        <div>
          <el-statistic
            :precision="2"
            decimal-separator="."
            :value="UP.RT"
            title="总退款">
            <template slot="prefix">
              <i class="el-icon-money" style="color: red"></i>
            </template>
          </el-statistic>
        </div>
      </el-col>
      <el-col :span="4">
        <div>
          <el-statistic
            :precision="2"
            decimal-separator="."
            :value="UP.IT"
            title="总发放">
            <template slot="prefix">
              <i class="el-icon-money" style="color: red"></i>
            </template>
          </el-statistic>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="10">
        <el-card>
          <div slot="header">
            <span>运行参数设置</span>
          </div>
          <div class="set">
            普通用户升级到团员付费
            <input v-model="P.OM" style="width: 70px;margin-right: 2px">
            <button @click="updataParam('upgrade:ordinary->member',P.OM)">修改</button>
          </div>
          <div class="set">
            普通用户升级到队长付费
            <input v-model="P.OC" style="width: 70px;margin-right: 2px">
            <button @click="updataParam('upgrade:ordinary->captain',P.OC)">修改</button>
          </div>
          <div class="set">
            普通用户升级到区域队长付费
            <input v-model="P.OR" style="width: 70px;margin-right: 2px">
            <button @click="updataParam('upgrade:ordinary->region',P.OR)">修改</button>
          </div>
          <div class="set">
            队员升级到队长付费
            <input v-model="P.MC" style="width: 70px;margin-right: 2px">
            <button @click="updataParam('upgrade:member->captain',P.MC)">修改</button>
          </div>
          <div class="set">
            队员升级到区域队长付费
            <input v-model="P.MR" style="width: 70px;margin-right: 2px">
            <button @click="updataParam('upgrade:member->region',P.MR)">修改</button>
          </div>
          <div class="set">
            队长升级到区域队长付费
            <input v-model="P.CR" style="width: 70px;margin-right: 2px">
            <button @click="updataParam('upgrade:captain->region',P.CR)">修改</button>
          </div>
        </el-card>
      </el-col>

      <el-col :span="14">
        <el-card style="margin-left: 10px">
          <div slot="header">
            <span>注册区/县</span>
          </div>

          <!--          <el-cascader-->
          <!--            style="width: 100%"-->
          <!--            size="mini"-->
          <!--            :options="options"-->
          <!--            v-model="selectedOptions"-->
          <!--            :props="{ multiple: true, checkStrictly: false ,emitPath:false }">-->
          <!--          </el-cascader>-->
          <!--          <el-button type="primary" size="small" @click="setList()">修改</el-button>-->
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {statistic} from '@/api/system/user';
  import {getValue, setValue} from '@/api/system/config';
  // import {options} from '@/utils/options.js';

  export default {
    data() {
      return {
        UP: {
          TN: null,
          R2: null,
          R3:null,
          R4: null,
          R5: null,
          R6: null,

          QC: null,
          PC: null,
          PT: null,
          RT: null,
          IT: null
        },
        P:{
          OM: null,
          OC: null,
          OR: null,
          MC: null,
          MR: null,
          CR: null
        },
        // options,
        selectedOptions: []
      };
    },
    created() {
      this.loading = true
      statistic().then(resp => {
        this.UP = resp
        this.loading = false
      })
      getValue('upgrade:ordinary->member').then(resp => {
        this.P.OM = resp.data
      })
      getValue('upgrade:ordinary->captain').then(resp => {
        this.P.OC = resp.data
      })
      getValue('upgrade:ordinary->region').then(resp => {
        this.P.OR = resp.data
      })
      getValue('upgrade:member->captain').then(resp => {
        this.P.MC = resp.data
      })
      getValue('upgrade:member->region').then(resp => {
        this.P.MR = resp.data
      })
      getValue('upgrade:captain->region').then(resp => {
        this.P.CR = resp.data
      })
    },
    methods: {
      updataParam(key, value) {
        setValue({
          key,
          value
        }).then(resp => {
          if (resp.code == 200) {
            this.$modal.msgSuccess('修改成功')
          }
        })
      }
    }
  };
</script>
<style lang="scss">
  .tjzt {
    margin-bottom: 8px;
    border-radius: 4px;
    padding: 12px;
    background-color: #cccccc
  }

  .set {
    margin-bottom: 8px;
  }
</style>
